<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import NewsDetail from './component/NewsDetail.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const newsData = ref([
  {
    id: 1,
    title: "One EBICO will attend 2023 Thailand BCT (Building Construction Technology) EXPO",
    time: "Sep 14, 2023",
    img: "../../assets/images/case-one.png",
    content: "EBICO has expertise and experience in large burners, fuel supply systems, and automatic control systems.EBICO's research focuses on large-scale ultra-low nitrogen industrial burners, non-standard combustion,and high-precision combustion equipment. EBICO",
    detail: `<p class="image-wrapper"><img data-img-size-val="1080,402" src="https://img.36krcdn.com/hsossms/20250616/v2_0827871fdda2490386a10052dca5a341@6022551_oswg38760oswg1080oswg402_img_000?x-oss-process=image/format,jpg/interlace,1"></p><p class="img-desc">面向不同草坪面积的割草机器人（图源/库犸科技）</p>"`
  },
  {
    id: 2,
    title: "Two EBICO will attend 2023 Thailand BCT (Building Construction Technology) EXPO",
    time: "Sep 14, 2023",
    img: "../../assets/images/case-one.png",
    content: "EBICO has expertise and experience in large burners, fuel supply systems, and automatic control systems.EBICO's research focuses on large-scale ultra-low nitrogen industrial burners, non-standard combustion,and high-precision combustion equipment. EBICO",
    detail: ` <p class="image-wrapper"><img data-img-size-val="1024,683" src="https://img.36krcdn.com/hsossms/20250616/v2_c624bc6f014944de94dab30c0841e926@6022551_oswg176996oswg1024oswg683_img_000?x-oss-process=image/format,jpg/interlace,1"></p>
  <p class="img-desc">Segway Navimow X3（图源/未岚大陆）</p>
  <p>九号公司副总裁、董事会秘书徐鹏告诉硬氪，基于过去Segway品牌积累，在用户教育方面，公司正与美国本土KOL、行业大V等展开合作，以专业测评、场景化内容输出等方式，加速市场认知培育，以辐射更多区域扩大品牌声量。</p>
  <p>硬氪了解到，他们现已同劳氏达成合作，首批产品将率先入驻其线上销售平台，并计划逐步推进线下门店的铺货。</p>
  <p>“进入美国市场需要一个过程，一旦用户的认知和教育完成之后，我们相信它的市场潜力远大于欧洲。”徐鹏说。</p>
  <p>在此之前，九号公司最新数据显示，今年4月份，旗下Navimow割草机器人已经拿下了德国区亚马逊平台的榜首。</p>`
  },
  {
    id: 3,
    title: "Three EBICO will attend 2023 Thailand BCT (Building Construction Technology) EXPO",
    time: "Sep 14, 2023",
    img: "../../assets/images/case-one.png",
    content: "EBICO has expertise and experience in large burners, fuel supply systems, and automatic control systems.EBICO's research focuses on large-scale ultra-low nitrogen industrial burners, non-standard combustion,and high-precision combustion equipment. EBICO",
    detail: ` <p class="image-wrapper"><img data-img-size-val="1024,683" src="https://img.36krcdn.com/hsossms/20250616/v2_e1d3d1e130f146478d4e6efc1f8e16a5@6022551_oswg67075oswg1080oswg471_img_000?x-oss-process=image/format,jpg/interlace,1"></p>
  <p class="img-desc">Segway Navimow X3（图源/未岚大陆）</p>
  <p>九号公司副总裁、董事会秘书徐鹏告诉硬氪，基于过去Segway品牌积累，在用户教育方面，公司正与美国本土KOL、行业大V等展开合作，以专业测评、场景化内容输出等方式，加速市场认知培育，以辐射更多区域扩大品牌声量。</p>
  <p>硬氪了解到，他们现已同劳氏达成合作，首批产品将率先入驻其线上销售平台，并计划逐步推进线下门店的铺货。</p>
  <p>“进入美国市场需要一个过程，一旦用户的认知和教育完成之后，我们相信它的市场潜力远大于欧洲。”徐鹏说。</p>
  <p>在此之前，九号公司最新数据显示，今年4月份，旗下Navimow割草机器人已经拿下了德国区亚马逊平台的榜首。</p>`
  },
  {
    id: 4,
    title: "Four EBICO will attend 2023 Thailand BCT (Building Construction Technology) EXPO",
    time: "Sep 14, 2023",
    img: "../../assets/images/case-one.png",
    content: "EBICO has expertise and experience in large burners, fuel supply systems, and automatic control systems.EBICO's research focuses on large-scale ultra-low nitrogen industrial burners, non-standard combustion,and high-precision combustion equipment. EBICO",
    detail: ` <p class="image-wrapper"><img data-img-size-val="1024,683" src="https://img.36krcdn.com/hsossms/20250616/v2_f53f53b0e7ad443a85e736b348d71209@6022551_oswg151996oswg1000oswg652_img_000?x-oss-process=image/format,jpg/interlace,1"></p>
  <p class="img-desc">Segway Navimow X3（图源/未岚大陆）</p>
  <p>九号公司副总裁、董事会秘书徐鹏告诉硬氪，基于过去Segway品牌积累，在用户教育方面，公司正与美国本土KOL、行业大V等展开合作，以专业测评、场景化内容输出等方式，加速市场认知培育，以辐射更多区域扩大品牌声量。</p>
  <p>硬氪了解到，他们现已同劳氏达成合作，首批产品将率先入驻其线上销售平台，并计划逐步推进线下门店的铺货。</p>
  <p>“进入美国市场需要一个过程，一旦用户的认知和教育完成之后，我们相信它的市场潜力远大于欧洲。”徐鹏说。</p>
  <p>在此之前，九号公司最新数据显示，今年4月份，旗下Navimow割草机器人已经拿下了德国区亚马逊平台的榜首。</p>`
  },
]);
const requireImage = (url) => {
  return new URL(url, import.meta.url).href
}
let checkedNews = ref({})
let currentNum = ref(-1)
let prevNum = ref(0)
let nextNum = ref(0)
let prevNews = ref({})
let nextNews = ref({})
let showNewsDetail = (item, index) => {
  currentNum.value = index;
}
// 切换路由
let selectedMenu = (item) => {
  checkedNews.value = {}
}
let changeNews = (index) => {
  currentNum.value = index;
}

watch(currentNum, (index, oldVal) => {
  console.log(`值从 ${oldVal} 变为 ${index}`);
  checkedNews.value = newsData.value[index];
  currentNum.value = index;
  prevNum.value = index === 0 ? 0 : index - 1;
  nextNum.value = index === newsData.value.length - 1 ? newsData.value.length - 1 : index + 1;
  prevNews.value = newsData.value[prevNum.value]
  nextNews.value = newsData.value[nextNum.value]
});
onMounted(() => {
  // 面包屑checkedNews重置
  checkedNews.value = {}
  currentNum.value = -1
  prevNews.value = {}
  nextNews.value = {}
});
</script>
<template>
  <div class="news-center">
    <div class="top">
      <img src="@/assets/images/news.png" alt="">
      <div class="text">News</div>
    </div>
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }" @click="selectedMenu('Home')">Home</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/NewsCenter' }" @click="selectedMenu('NewsCenter')">News</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/NewsCenter' }" v-if="checkedNews.title">
          {{ checkedNews.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="news-form">
      <div class="news-content">
        <div v-if="!checkedNews.title">
          <div class="news-item" v-for="(item, index) in newsData" :key="item.id" @click="showNewsDetail(item, index)">
            <div class="left">
              <img src="@/assets/images/case-one.png" alt="">
            </div>
            <div class="right">
              <p class="title">{{ item.title }}</p>
              <div class="date">
                <img src="@/assets/images/clock.png" alt="">
                <span class="time">{{ item.time }}</span>
              </div>
              <div class="content">
                {{ item.content }}
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <NewsDetail :checkedNews="checkedNews"></NewsDetail>
          <div class="prev-next">
            <div class="prev-news public" @click="changeNews(prevNum)" v-if="currentNum !== 0">
              <div class="btn">
                <img src="@/assets/images/arrow-btn.png" alt="">
              </div>
              <div class="text">
                {{ prevNews.title }}
              </div>
            </div>
            <div v-else class="public">当前是第一篇</div>
            <div class="next-news public" @click="changeNews(nextNum)" v-if="currentNum !== newsData.length - 1">
              <div class="text">
                {{ nextNews.title }}
              </div>
              <div class="btn">
                <img src="@/assets/images/arrow-btn.png" alt="">
              </div>
            </div>
            <div v-else class="public pl">当前是最后一篇</div>
          </div>
        </div>
      </div>
      <div class="pagination" v-if="!checkedNews.title">
        <el-pagination layout="prev, pager, next" :total="1000" />
      </div>
    </div>
  </div>
</template>
<style scoped lang='scss'>
.news-center {
  .top {
    width: 100%;
    position: relative;

    .text {
      font-weight: bold;
      color: #fff;
      font-size: 30px;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .bread-crumb {
    width: 100%;
    height: 43px;
    background: #F2F2F2;
    display: flex;
    align-items: center;

    :deep(.el-breadcrumb) {
      max-width: 1200px;
      width: 1200px;
      margin: 0 auto;

      .el-breadcrumb__item {
        .el-breadcrumb__inner.is-link {
          font-size: 16px;
          color: #ccc;
        }

        &:last-child {
          .el-breadcrumb__inner {
            color: #333;
          }
        }
      }
    }
  }

  .news-form {
    min-height: 1168px;
    width: 100%;
    background: #fff;

    .news-content {
      max-width: 1200px;
      margin: 40px auto 0px;

      .news-item {
        width: 100%;
        height: 237px;
        background: #F2F2F2;
        border-radius: 0px;
        padding: 21px;
        box-sizing: border-box;
        display: flex;
        margin: 0px 0px 30px 0px;

        &:hover {
          background: #FFFFFF;
          box-shadow: 0px 6px 20px 1px rgba(0, 0, 0, 0.16);
        }

        .left {
          width: 261px;
          height: 195px;
          margin: 0px 37px 0px 0px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: calc(100% - 261px - 37px);

          .title {
            font-weight: 400;
            font-size: 18px;
            color: #000000;
          }

          .date {
            display: flex;
            align-items: center;
            margin: 16px 0px 0px 0px;

            img {
              width: 16px;
              height: 16px;
              margin: 0px 8px 0px 0px;
            }

            .time {
              font-size: 16px;
              color: #999999;
            }
          }

          .content {
            margin: 37px 0px 0px 0px;
            font-size: 16px;
            color: #999999;
            line-height: 30px;
            display: -webkit-box;
            line-clamp: 3;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
        }
      }

      .prev-next {
        width: 100%;
        height: 73px;
        background: #F2F2F2;
        margin: 50px 0px 70px 0px;
        padding: 16px 25px;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .prev-news {
          .text {
            padding: 0px 89px 0px 0px;
            border-right: 1px solid #E5E5E5;
          }

          .btn {
            margin: 0px 29px 0px 0px;
          }
        }

        .next-news {
          .text {
            padding: 0px 0px 0px 89px;
          }

          .btn {
            margin: 0px 0px 0px 29px;
            transform: rotate(180deg);
          }
        }

        .public {
          width: 50%;
          display: flex;
          align-items: center;
          cursor: pointer;

          .btn {
            width: 30px;
            height: 30px;
            display: flex;
            flex-shrink: 0;
            align-items: center;
          }

          .text {
            line-height: 24px;
            font-size: 16px;
            color: #666666;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            word-break: break-all;
          }
        }
        .pl{
          padding: 0px 0px 0px 25px;
        }


      }
    }

    .pagination {
      display: flex;
      justify-content: center;
      margin: 20px 0px 67px 0px;
    }

    :deep(.el-pagination) {

      .btn-prev,
      .number,
      .btn-next {
        border: 1px solid #E5E5E5;
        font-size: 18px;
        margin: 0px 18px 0px 0px;
        color: #333;
        width: 36px;
        height: 36px;
      }

      .is-active {
        color: #fff;
        background: #5B108E;
      }
    }

  }
}
</style>
